import { CloseOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive, ref } from "vue";
import styles from "./paypopup.module.less";
import { useStore as useUserStore } from "@/store/user";
import { message } from "ant-design-vue";
import { $onlinePay, $pay } from "@/api/order/order";
import eventBus from "@/common/mitt";
import { useRouter } from "vue-router";
export default defineComponent({
  setup(props, { expose }) {
    const userStore = useUserStore();
    const router = useRouter();
    const state = reactive({
      isShow: false,
      checked: null,
      out_trade_no: '',
      order_no: '',
      sum_premium: '',
    })
    const open = (e: any) => {
      state.isShow = true;
      state.out_trade_no = e.out_trade_no;
      state.order_no = e.order_no;
      state.sum_premium = e.sum_premium;
      console.log(e)
      //e.sum_premium  支付金额
    }
    const isClick = ref(false as any);
    //支付
    const payOrder = () => {
      if (state.checked === null) {
        message.error('请选择支付方式')
        return;
      }
      if (Number(userStore.user_info.balance) < Number(state.sum_premium)) {
        message.error('余额不足,请切换其他支付方式支付')
        return;
      };
      if (isClick.value === true) return;
      if (state.checked === 0) {   //在线支付
        $onlinePay({
          out_trade_no: state.out_trade_no,
          pay_type: "sfypay",
          app_type: "pc",
          return_url: `${process.env.VUE_APP_PAY_RETURN_URL}?order_no=${state.order_no}`
        }).then((res: any) => {
          const payObj = res.data?.data || {};
          window.location.href = payObj;
        }).catch(() => {
          isClick.value = false;
        })
      } else {
        $pay({                      //余额支付
          out_trade_no: state.out_trade_no,
          pay_type: "BALANCE",
        }).then((payRes: any) => {
          message.success("支付成功!");
          eventBus.payed.emit();
          setTimeout(() => {
            router.push(`/userCenter/index/orderDetail?order_no=${state.order_no}`);
            const dom: any = document.getElementById("app");
            dom.scrollTop = 0;
            isClick.value = false;
          }, 1000)
        }).catch(() => {
          isClick.value = false;
        })
      }
    }
    expose({
      open,
    })

    return () => (
      <div class={styles.failCausepopup} v-show={state.isShow}>
        <div class={styles.card}>
          <div class={styles['header-box']}>
            <span class={styles.title}>订单支付</span>
            <CloseOutlined class={styles['close-icon']} onClick={() => { state.isShow = false }} />
          </div>
          <div class={styles.content}>
            <div class={styles.title}>支付方式</div>
            <div class={styles['pay-radio-group']}>
              <a-radio-group
                v-model:value={state.checked}
                name="radioGroup"
              >
                <div class={styles['pay-radio-item']}>
                  <a-radio value={0}>在线支付</a-radio>
                </div>
                <div class={styles['pay-radio-item']}>
                  <a-radio value={1}>预缴存支付（余额{userStore.user_info.balance}￥元）</a-radio>
                </div>
              </a-radio-group>
            </div>
            <div class={styles['btn-box']}>
              <div class={styles.btn} onClick={() => { payOrder() }}>
                支付
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
})